<template>
  <div>
    <div class="group">
      <Sondemo1></Sondemo1>
    </div>
    <div class="group">
      <SonDemo2 :sparr="sparr"></SonDemo2>
    </div>
    <div class="group">
      <SonDemo3></SonDemo3>
    </div>
    <div class="group">
      <SonDemo4></SonDemo4>
    </div>
    <div class="group">
      <SonDemo5></SonDemo5>
    </div>
    <div class="group">
      <SonDemo6 :message="message" @gengxin="gengxinfu"></SonDemo6>
    </div>
    <div class="group">
      <SonDemo7></SonDemo7>
    </div>
    <div class="group">
      <SonDemo8></SonDemo8>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Sondemo1 from './Anli/Sondemo1.vue'
import SonDemo2 from './Anli/Sondemo2.vue'
import SonDemo3 from './Anli/Sondemo3.vue'
import SonDemo4 from './Anli/Sondemo4.vue'
import SonDemo5 from './Anli/Sondemo5.vue'
import SonDemo6 from './Anli/Sondemo6.vue'
import SonDemo7 from './Anli/Sondemo7.vue'
import SonDemo8 from './Anli/Sondemo8.vue'

const sparr = ref([
  { id: 1, title: '辣条', price: 1 },
  { id: 2, title: '泡面', price: 5 },
  { id: 3, title: '薯片', price: 6 },
  { id: 4, title: '糖果', price: 2 }
])

const message = ref('hello,nihao')
const gengxinfu = (val: string) => {
  message.value = val
}
</script>

<style lang="scss" scoped>
.group {
  border: 1px solid rgb(60, 130, 200);
  padding: 10px;
  margin: 10px;
  box-sizing: border-box;
}
</style>
